<template>
  <div>
    <el-container style="height: 696px; border: 1px solid #eee">
      <Left></Left>
      <el-container>
        <el-header style="text-align: right; font-size: 12px;width: 100%;">
          <Top></Top>
        </el-header>
        <el-main>
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-dark">
                <b style="font-family: '微软雅黑';color: #606266;margin: 20px 30px;text-align: center;font-size: 20px;">作业列表信息</b>
              </div>
            </el-col>
          </el-row>
          <!--作业列表信息-->
          <div>
            <el-table
              :data="tableData"
              border
              style="width: 100%;">
              <el-table-column
                prop="taskName"
                label="作业名称">
              </el-table-column>
              <el-table-column
                prop="teacherName"
                label="老师姓名">
              </el-table-column>
              <el-table-column
                prop="classroomName"
                label="所属班级">
              </el-table-column>
              <el-table-column
                prop="courseName"
                label="所属课程">
              </el-table-column>
              <el-table-column
                prop="numberPersonsDue"
                label="应交数量">
              </el-table-column>
              <el-table-column
                prop="taskSubmitNumber"
                label="已交数量">
              </el-table-column>
              <el-table-column
                prop="startTime"
                label="开始时间"
                width="95">
              </el-table-column>
              <el-table-column
                prop="endTime"
                label="结束时间"
                width="95">
              </el-table-column>
              <el-table-column
                prop="taskDescribe"
                label="作业描述">
              </el-table-column>
              <el-table-column
                prop="enclosureName"
                label="附件名称">
              </el-table-column>
              <el-table-column
                prop="enclosureName"
                label="作业状态"
                width="120">
                <template slot-scope="scope">
                  <el-tag :type="type">{{scope.row.status}}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="290">
                <template slot-scope="scope">
                  <el-button type="success" size="small" @click="handleOpen(scope.$index, scope.row)">下载</el-button>
                  <el-button type="primary" size="small" @click="handleScore(scope.$index, scope.row)">打分</el-button>
                  <el-button type="primary" size="small" @click="seeScore(scope.$index, scope.row)">成绩</el-button>
                  <el-tooltip class="item" effect="dark" content="此操作将永久删除此作业信息，请谨慎操作！！" placement="top">
                    <el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 删除作业确认框-->
          <div>
            <el-dialog
              icon="warning"
              title="提示"
              :visible.sync="dialogVisible"
              width="27%"
              :before-close="handleClose">
              <span> <i class="el-icon-delete-solid"></i> &nbsp;&nbsp;&nbsp;再次确定永久删除此作业吗？？</span>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="doDeleteTask">确 定</el-button>
              </span>
            </el-dialog>
          </div>
          <!--作业提交详情对话框-->
          <div>
            <el-dialog title="已提交作业的学生" :visible.sync="dialogTableVisible">
              <div v-loading="loading"
                   element-loading-text="正在下载学生作业附件，请稍后..."
                   element-loading-spinner="el-icon-loading">
                <el-table :data="submitStudentData" border show-overflow-tooltip="true" ref="multipleTable">
                  <el-table-column type="selection" width="55"></el-table-column>
                  <el-table-column property="studentName" label="学生姓名"></el-table-column>
                  <el-table-column property="studentNum" label="学生学号"></el-table-column>
                  <el-table-column property="originalFileName" label="提交的附件名称"></el-table-column>
                  <el-table-column property="uploadFileTime" label="提交时间"></el-table-column>
                </el-table>
              </div>
              <div style="margin-top: 20px;">
                <el-button type="primary" @click="downStudentFile">批量下载学生作业附件</el-button>
              </div>
            </el-dialog>
          </div>
          <!--作业提交详情对话框-->
          <div>
            <el-dialog title="成绩打分" :visible.sync="dialogCourseVisible">
              <div>
                <el-table
                  :data="courseStudentData"
                  border
                  style="width: 100%">
                  <el-table-column
                    prop="studentName"
                    label="学生姓名">
                  </el-table-column>
                  <el-table-column
                    prop="studentNum"
                    label="学生学号">
                  </el-table-column>
                  <el-table-column
                    prop="originalFileName"
                    label="提交的附件名称">
                  </el-table-column>
                  <el-table-column
                    prop="uploadFileTime"
                    label="提交时间">
                  </el-table-column>
                  <el-table-column label="作业分数"  width="210">
                    <template slot-scope="scope">
                      <el-input-number v-model="scope.row.achievement" :step="5"></el-input-number>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div style="margin-top: 20px;">
                <el-button type="primary" @click="saveStudentCourse">保存学生成绩</el-button>
              </div>
            </el-dialog>
          </div>
          <!--学生成绩详情对话框-->
          <div>
            <el-dialog title="学生成绩" :visible.sync="dialogSeeCourseVisible">
              <div>
                <el-table :data="submitStudentData" border show-overflow-tooltip="true">
                  <el-table-column property="studentName" label="学生姓名"></el-table-column>
                  <el-table-column property="studentNum" label="学生学号"></el-table-column>
                  <el-table-column property="achievement" label="作业成绩"></el-table-column>
                </el-table>
              </div>
            </el-dialog>
          </div>
        </el-main>

      </el-container>

    </el-container>
  </div>
</template>

<script>
import Left from '@/components/teacherSide/left'
import Top from '@/components/teacherSide/top'

export default {
  name: 'teacherTaskList',
  data () {
    return {
      loading: false,
      dialogTableVisible: false,
      dialogCourseVisible: false,
      dialogSeeCourseVisible: false,
      type: 'warning',
      teacherId: '',
      tableData: [{
        classroomName: '',
        courseName: '',
        enclosureName: '',
        endTime: '',
        startTime: '',
        taskDescribe: '',
        taskName: '',
        teacherName: '',
        status: '',
        numberPersonsDue: '',
        taskSubmitNumber: ''
      }],
      dialogVisible: false,
      deleteTask: [],
      taskSubmit: [],
      submitStudentData: [],
      courseStudentData: []
    }
  },
  created () {
    this.getTeacherId()
    this.getAllTask()
  },
  methods: {
    handleScore (index, value) {
      this.dialogCourseVisible = true
      this.getTaskSubmit(value)
    },
    // 查看成绩
    seeScore (index, value) {
      this.dialogSeeCourseVisible = true
      this.$axios.post('http://localhost:8888/teacherSeeTaskSubmit', value).then(res => {
        if (res.data.flag) {
          this.courseStudentData = res.data.data
        }
      }).catch(err => {
        return Promise.reject(err)
      })
    },
    // 打分
    saveStudentCourse () {
      this.$axios.post('http://localhost:8888/teacherMarksForStudent', this.courseStudentData).then(res => {
        if (res.data.flag) {
          this.$message({
            message: '恭喜你，此次作业已完成打分',
            type: 'success'
          })
          this.dialogCourseVisible = false
        } else {
          this.$message.error('错了哦，此次作业未完成打分')
        }
      }).catch(err => {
        return Promise.reject(err)
      })
    },
    // 批量下载
    downStudentFile () {
      this.loading = true
      this.$axios.post('http://localhost:8888/teacherDownStudentFile', this.$refs.multipleTable.selection, {
        responseType: 'blob'
      }).then(response => {
        const blob = new Blob([response.data], { type: 'application/zip' })
        if ('download' in document.createElement('a')) {
          // 非IE下载
          const elink = document.createElement('a')
          elink.download = name
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          // 释放URL对象
          URL.revokeObjectURL(elink.href)
          document.body.removeChild(elink)
        } else {
          navigator.msSaveBlob(blob, name)
        }
        this.loading = false
        this.$message({
          message: '恭喜你，学生作业附件下载成功',
          type: 'success'
        })
      }).catch(err => {
        return Promise.reject(err)
      })
    },
    // 打开作业提交详情对话框
    handleOpen (index, value) {
      this.dialogTableVisible = true
      this.getTaskSubmit(value)
    },
    // 获取已提交作业的学生信息
    getTaskSubmit (value) {
      this.$axios.post('http://localhost:8888/teacherSeeTaskSubmit', value).then(res => {
        if (res.data.flag) {
          this.submitStudentData = res.data.data
          this.courseStudentData = res.data.data
        }
      }).catch(err => {
        return Promise.reject(err)
      })
    },
    // 删除课程信息
    handleDelete (index, row) {
      this.dialogVisible = true
      this.deleteTask = row
    },
    // 获取教师id
    getTeacherId () {
      this.teacherId = JSON.parse(localStorage.getItem('teacher')).teacherId
    },
    // 获取当前老师名下的所有作业
    getAllTask () {
      this.$axios.post('http://localhost:8888/teacherGetAllTask/' + this.teacherId).then(res => {
        if (res.data.flag) {
          this.tableData = res.data.data
        }
      }).catch(err => {
        return Promise.reject(err)
      })
    },
    // 编辑作业状态
    editTaskStatus (status) {
      if (status === '作业未开始') {
        this.type = 'info'
      } else if (status === '作业已截止') {
        this.type = 'danger'
      } else if (status === '作业正在进行') {
        this.type = 'success'
      }
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {
        })
    },
    // 删除作业
    doDeleteTask () {
      this.dialogVisible = false
      this.$axios.post('http://localhost:8888/teacherDeleteTask/' + this.teacherId, this.deleteTask).then((res) => {
        if (res.data.flag) {
          this.$message({
            message: '恭喜你，作业删除成功',
            type: 'success'
          })
          this.getAllTask()
        } else {
          this.$message.error('很抱歉，作业删除失败啦')
        }
      }).catch((err) => {
        return Promise.reject(err)
      })
    },
    handleEdit (index, row) {
      console.log(index, row)
    }
  },
  components: {
    Left,
    Top
  }
}
</script>

<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>
<style scoped>
  .router-link-active {
    text-decoration: none;
    color: yellow;
  }

  a {
    text-decoration: none;
    color: white;
  }
</style>
<style>
  .el-row {
    margin-bottom: 20px;

  &
  :last-child {
    margin-bottom: 0;
  }

  }
  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #cadcf5;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
